<template>
  <div class="center">
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="btnaddBrand">添加</el-button>
      </div>
      <div class="table_searchs flex">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="批次" value="batch"></el-option>
              <el-option label="归属" value="username"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
      </div>
    </div>
    <el-table stripe style="width: 100%" :data="tableData" :key="key" border fit highlight-current-row ref="tableDataRef" @row-dblclick="tableClick" max-height="545">
      <el-table-column v-if="colData[0].istrue" min-width="150" align="center" prop="username" label="归属" fixed></el-table-column>
      <el-table-column v-if="colData[1].istrue" min-width="140" align="center" prop="batch" label="批次" fixed></el-table-column>
      <el-table-column v-if="colData[2].istrue" min-width="130" align="center" prop="qch_restore" label="恢复出厂设置开关">
        <template slot-scope="scope">{{scope.row.qch_restore == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[3].istrue" min-width="130" align="center" prop="setting_call" label="电话通话功能">
        <template slot-scope="scope">{{scope.row.setting_call == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="130" align="center" prop="setting_memory" label="扩展存储卡">
        <template slot-scope="scope">{{scope.row.setting_memory == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[5].istrue" min-width="130" align="center" prop="setting_hotspot" label="wifi共享热点">
        <template slot-scope="scope">{{scope.row.setting_hotspot == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[6].istrue" min-width="140" align="center" prop="setting_bluetooth" label="蓝牙数据功能开关">
        <template slot-scope="scope">{{scope.row.setting_bluetooth == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[7].istrue" min-width="140" align="center" prop="setting_bhtvideo" label="蓝牙音频连接">
        <template slot-scope="scope">{{scope.row.setting_bhtvideo == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[8].istrue" min-width="160" align="center" prop="setting_context" label="蓝牙名称"></el-table-column>
      <el-table-column v-if="colData[9].istrue" min-width="130" align="center" prop="setting_navigation" label="系统导航条显示">
        <template slot-scope="scope">{{scope.row.setting_navigation == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[10].istrue" min-width="130" align="center" prop="setting_statusbar" label="状态栏显示">
        <template slot-scope="scope">{{scope.row.setting_statusbar == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[11].istrue" min-width="130" align="center" prop="setting_camera" label="摄像头开关">
        <template slot-scope="scope">{{scope.row.setting_camera == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[12].istrue" min-width="130" align="center" prop="setting_clock" label="时钟功能开关">
        <template slot-scope="scope">{{scope.row.setting_clock == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[13].istrue" min-width="130" align="center" prop="setting_recording" label="录音功能开关">
        <template slot-scope="scope">{{scope.row.setting_recording == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[14].istrue" min-width="130" align="center" prop="setting_music" label="音乐功能开关">
        <template slot-scope="scope">{{scope.row.setting_music == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[15].istrue" min-width="130" align="center" prop="setting_picture" label="图库功能开关">
        <template slot-scope="scope">{{scope.row.setting_picture == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[16].istrue" min-width="130" align="center" prop="setting_wallpaper" label="壁纸功能开关">
        <template slot-scope="scope">{{scope.row.setting_wallpaper == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[17].istrue" min-width="140" align="center" prop="setting_file" label="文件管理功能开关">
        <template slot-scope="scope">{{scope.row.setting_file == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[18].istrue" min-width="140" align="center" prop="setting_browserInput" label="浏览器网址输入开关">
        <template slot-scope="scope">{{scope.row.setting_browserInput == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[19].istrue" min-width="140" align="center" prop="setting_browser" label="浏览器功能开关">
        <template slot-scope="scope">{{scope.row.setting_browser == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[20].istrue" min-width="130" align="center" prop="setting_phone" label="电话白名单">
        <template slot-scope="scope">{{scope.row.setting_phone == 1 ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[21].istrue" min-width="170" align="center" prop="setting_usb" label="USB数据功能">
        <template slot-scope="scope">{{scope.row.setting_usb == 'usb_charge' ? '仅充电' : (scope.row.setting_usb == 'usb_mtp' ? 'MTP模式（媒体传输协议）' : 'Midi模式')}}</template>
      </el-table-column>
      <el-table-column v-if="colData[22].istrue" min-width="140" align="center" prop="setting_tfmedia" label="影音娱乐功能管控">
        <template slot-scope="scope">{{scope.row.setting_tfmedia == 1 ? '开启' : '禁用'}}</template>
      </el-table-column>
      <el-table-column v-if="colData[23].istrue" min-width="200" align="center" prop="setting_phones" label="电话白名单列表"></el-table-column>
      <el-table-column v-if="colData[24].istrue" min-width="150" align="center" prop="createtime" label="创建时间">
        <template slot-scope="scope">{{scope.row.createtime| newDate}}</template>
      </el-table-column>
      <el-table-column min-width="145" align="center" prop="log" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="getqueryIdOtherSetting(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="getdeleteOtherSetting(scope.row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
      </el-pagination>
    </div>
    <!-- 隐藏 -->
    <!-- 添加dialog表单 -->
    <div>
      <el-dialog :title="editSubjects ? '添加' : '编辑'" :visible.sync="dialogFormVisible" @close="addFormclose" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="addForm" ref="ruleForm" :rules="rules" class="diolog_adapt">
          <el-form-item label="批次:" label-width="160px" prop="batch">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="一个批次只能部署一种管控" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-select v-model="addForm.batch" placeholder="没有选中任何项" class="add_select" multiple filterable>
                <el-option v-for="item in lotoptions" :key="item.id" :label="item.batch" :value="item.id.toString()"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="USB数据功能:" label-width="160px" prop="setting_usb">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="MTP模式 Midi模式 仅充电" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-select v-model="addForm.setting_usb" placeholder="没有选中任何项" class="add_select">
                <el-option label="仅充电" value="usb_charge"></el-option>
                <el-option label="MTP模式（媒体传输协议）" value="usb_mtp"></el-option>
                <el-option label="Midi模式" value="usb_midi"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="时间设置管控:" label-width="160px" prop="setting_usb">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="网络时间 GPS时间 关闭以上管控" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-select v-model="addForm.setting_autotime" placeholder="没有选中任何项" class="add_select">
                <el-option label="使用网络时间" value="autotime_network"></el-option>
                <!-- <el-option label="使用  GPS时间" value="autotime_gps"></el-option> -->
                <el-option label="关闭以上管控" value="autotime_off"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="恢复出厂设置开关:" label-width="160px" prop="setting_call" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="恢复出厂设置开关（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.qch_restore" :label="1">开启</el-radio>
                <el-radio v-model="addForm.qch_restore" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="电话通话开关:" label-width="160px" prop="setting_call" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="电话通话功能（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_call" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_call" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="扩展存储卡开关:" label-width="160px" prop="setting_memory" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="扩展存储卡（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_memory" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_memory" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="wifi共享热点开关:" label-width="160px" prop="setting_hotspot" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="wifi共享热点（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_hotspot" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_hotspot" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="蓝牙总开关:" label-width="160px" prop="setting_phone" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="蓝牙总开关（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-radio-group v-model="addForm.setting_bht" @change="settingBluetooth">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <div v-if="bluetooth">
            <el-form-item prop="setting_bluetooth" size="mini">
              <div class="flex felx_align setting">
                <label for="" class="setLabel"><i class="el-icon-arrow-right"></i>蓝牙数据功能开关:</label>
                <div style="padding-right:5px">
                  <el-tooltip class="item" effect="light" content="开启或关闭蓝牙文件传输功能，并不是关闭和开启蓝牙" placement="top-start">
                    <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                  </el-tooltip>
                </div>
                <div>
                  <el-radio v-model="addForm.setting_bluetooth" :label="1">开启</el-radio>
                  <el-radio v-model="addForm.setting_bluetooth" :label="0">禁用</el-radio>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="setting_phone" size="mini">
              <div class="flex felx_align setting">
                <label for="" class="setLabel"><i class="el-icon-arrow-right"></i>蓝牙音频连接管控开关:</label>
                <div style="padding-right:5px">
                  <el-tooltip class="item" effect="light" content="蓝牙音频连接管控（注意：禁用后关闭此功能）" placement="top-start">
                    <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                  </el-tooltip>
                </div>
                <el-radio-group v-model="addForm.setting_bhtvideo" @change="settingAudio">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </div>
          <el-form-item label-width="160px" size="mini" v-if="audioShow" prop="setting_context" :rules="{ validator: validateUsername, trigger: 'change' }">
            <el-select class="selectStyle" v-model="addForm.setting_context" remote multiple allow-create default-first-option popper-class="selectPopper" filterable :popper-append-to-body="false" size="small"
              placeholder="请输入蓝牙名称,用回车添加,留空将允许设备连接任何蓝牙设备"></el-select>
          </el-form-item>
          <el-form-item label="摄像头开关:" label-width="160px" prop="setting_camera" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="相机功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_camera" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_camera" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="时钟功能开关:" label-width="160px" prop="setting_clock" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="时钟功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_clock" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_clock" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="录音功能开关:" label-width="160px" prop="setting_recording" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="录音功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_recording" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_recording" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="音乐功能开关:" label-width="160px" prop="setting_music" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="音乐功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_music" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_music" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="图库功能开关:" label-width="160px" prop="setting_picture" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="图库功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_picture" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_picture" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="壁纸功能开关:" label-width="160px" prop="setting_wallpaper" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="壁纸功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_wallpaper" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_wallpaper" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="文件管理功能开关:" label-width="160px" prop="setting_file" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="文件管理器功能的禁用（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_file" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_file" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="浏览器网址输入开关:" label-width="160px" prop="setting_file" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="浏览器网址输入开关（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_browserInput" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_browserInput" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="浏览器功能开关:" label-width="160px" prop="setting_file" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="浏览器功能开关（注意：禁用后关闭此功能）" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_browser" :label="1">开启</el-radio>
                <el-radio v-model="addForm.setting_browser" :label="0">禁用</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="电话白名单开关:" label-width="160px" prop="setting_phone" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="电话白名单的设置，设置电话的白名单号码" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-radio-group v-model="addForm.setting_phone" @change="settingPhone">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item prop="setting_phones" size="mini" v-if="settingPhoneShow" :rules="{ validator: validatePhone, trigger: 'change' }">
            <div class="flex felx_align">
              <label for="" class="setLabel"><i class="el-icon-arrow-right"></i>电话白名单列表:</label>
              <el-select class="selectStyle" v-model="addForm.setting_phones" remote multiple allow-create default-first-option popper-class="selectPopper" filterable :popper-append-to-body="false" size="small"
                placeholder="请输入手机号码,用回车添加"></el-select>
            </div>
          </el-form-item>
          <el-form-item label="系统导航条显示:" label-width="160px" prop="setting_navigation" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="管控安卓系统三大键的隐藏或开启" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_navigation" :label="1">显示</el-radio>
                <el-radio v-model="addForm.setting_navigation" :label="0">隐藏</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="setting_phones" size="mini" v-if="navigation">
            <div class="flex felx_align">
              <label for="" class="setLabel"><i class="el-icon-arrow-right"></i>导航条选项:</label>
              <div class="felx felx_align eckBox">
                <el-checkbox label="显示所有" v-model="addForm.setting_nav.whole" @change="eckboxChange"></el-checkbox>
                <el-checkbox label="home" v-model="addForm.setting_nav.home" :disabled="navKey"></el-checkbox>
                <el-checkbox label="返回键" v-model="addForm.setting_nav.returnKey" :disabled="navKey"></el-checkbox>
                <el-checkbox label="任务键" v-model="addForm.setting_nav.taskbar" :disabled="navKey"></el-checkbox>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="状态栏显示:" label-width="160px" prop="setting_statusbar" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="管控安卓顶部通知栏显示" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <div>
                <el-radio v-model="addForm.setting_statusbar" :label="1">显示</el-radio>
                <el-radio v-model="addForm.setting_statusbar" :label="0">隐藏</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="setting_phones" size="mini" v-if="statusPanelBar">
            <div class="flex felx_align">
              <label  class="setLabel"><i class="el-icon-arrow-right"></i>状态栏选项:</label>
                <el-radio-group v-model="addForm.setting_statuspanelbar_forbit" size="mini">
                  <el-radio :label="1" border>禁止下拉展示</el-radio>
                  <el-radio :label="-1" border>允许下拉展示</el-radio>
                </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="影音娱乐功能管控:" label-width="160px" prop="setting_tfmedia" size="mini">
            <div class="flex felx_align setting">
              <div style="padding-right:5px">
                <el-tooltip class="item" effect="light" content="管控各种文件格式的显示或隐藏" placement="top-start">
                  <el-button icon="el-icon-question" circle size="mini" style="padding:0;font-size:14px"></el-button>
                </el-tooltip>
              </div>
              <el-radio-group v-model="addForm.setting_tfmedia" @change="settingFmedia">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <div v-if="settingFmediaShow">
            <el-form-item prop="" size="mini">
              <div>
                <label for="" class="setLabel" style="float: left;"><i class="el-icon-arrow-right"></i>图形文件格式黑名单:</label>
                <div class="flex" style="margin-left:160px">
                  <el-checkbox :indeterminate="graph.isIndeterminate" v-model="graph.checkAll" @change="handleCheckAllChange" style="margin-right:10px">全选</el-checkbox>
                  <el-checkbox-group v-model="graph.checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="(item,index) in graph.cities" :label="item.format" :key="index">{{item.format}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="" size="mini">
              <label for="" class="setLabel" style="float: left;"><i class="el-icon-arrow-right"></i>音频文件格式黑名单:</label>
              <div class="flex">
                <el-checkbox :indeterminate="voice.isIndeterminate" v-model="voice.checkAll" @change="voicehandleCheckAllChange" style="margin-right:10px">全选</el-checkbox>
                <el-checkbox-group v-model="voice.checkedCities" @change="voicehandleCheckedCitiesChange">
                  <el-checkbox v-for="(item,index) in voice.cities" :label="item.format" :key="index">{{item.format}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
            <el-form-item prop="" size="mini">
              <label for="" class="setLabel" style="float: left;"><i class="el-icon-arrow-right"></i>视频文件格式黑名单:</label>
              <div class="flex">
                <el-checkbox :indeterminate="videos.isIndeterminate" v-model="videos.checkAll" @change="videoshandleCheckAllChange" style="margin-right:10px">全选</el-checkbox>
                <el-checkbox-group v-model="videos.checkedCities" @change="videohandleCheckedCitiesChange">
                  <el-checkbox v-for="(item,index) in videos.cities" :label="item.format" :key="index">{{item.format}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
            <el-form-item prop="" size="mini">
              <label for="" class="setLabel" style="float: left;"><i class="el-icon-arrow-right"></i>文档文件格式黑名单:</label>
              <div class="flex">
                <el-checkbox :indeterminate="docum.isIndeterminate" v-model="docum.checkAll" @change="documhandleCheckAllChange" style="margin-right:10px">全选</el-checkbox>
                <el-checkbox-group v-model="docum.checkedCities" @change="documhandleCheckedCitiesChange">
                  <el-checkbox v-for="(item,index) in docum.cities" :label="item.format" :key="index">{{item.format}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini" round>取 消</el-button>
          <el-button v-if="editSubjects" type="primary" @click="getaddOtherSetting('ruleForm')" size="mini" round>确 定</el-button>
          <el-button v-else type="primary" @click="geteditOtherSetting('ruleForm')" size="mini" round>编辑</el-button>
        </div>
      </el-dialog>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
    </div>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import {
  queryOtherSetting, queryTfMediaImg, queryTfMediaMusic, queryTfMediaFile, queryTfMediaVideo,
  addOtherSetting, queryIdOtherSetting, deleteOtherSetting, editOtherSetting
} from "@/api/deployment.js";
import deleteDialog from "@/components/deleteDialog";
import { getBatchTwo } from "@/api/equipment.js";
import { forEach } from 'jszip';
import tableMini from '@/utils/tableMini.js'
export default {
  mixins: [tableMini],
  components: { dynamicTable, deleteDialog },
  data() {
    return {
      validateUsername: (rule, value, callback) => {
        value.forEach(item => {
          if (item.match(/^[ ]*$/)) return callback(new Error('不允许输入空格，请删掉重新输入'))
          if (item.length > 30) return callback(new Error('限制输入30位字符，请删掉重新输入'))
        })
        if (value.length > 30) return callback(new Error('蓝牙名称最多输入30个，请删掉重新输入'))
        callback()
      },
      validatePhone: (rule, value, callback) => {
        value.forEach(item => {
          if (item.match(/^[ ]*$/)) return callback(new Error('不允许输入空格，请删掉重新输入'))
          if (item.length != 11) return callback(new Error('请输入正确的手机号码，请删掉重新输入'))
        })
        if (value.length > 100) return callback(new Error('电话白名单最多输入100个，请删掉重新输入'))
        callback()
      },
      checkboxVal: ["归属", "批次", "恢复出厂设置开关", "电话通话功能", "扩展存储卡", "wifi共享热点", "蓝牙数据功能开关", "蓝牙音频连接", "蓝牙名称", "系统导航条显示", "状态栏显示", "摄像头开关", "时钟功能开关", "录音功能开关",
        "音乐功能开关", "图库功能开关", "壁纸功能开关", "文件管理功能开关", "浏览器网址输入开关", "浏览器功能开关", "电话白名单", "USB数据功能", "影音娱乐功能管控", "电话白名单列表", "创建时间"],
      select: "", //搜索条件
      //添加按钮控制
      dialogFormVisible: false,
      //编辑按钮控制
      editSubjects: true,
      //浏览器专题id
      subjectId: 0,
      tableData: [],
      lotoptions: [],
      //添加表单
      addForm: {
        batch: "",
        setting_call: 1,
        setting_memory: 1,
        setting_usb: "usb_mtp",
        setting_autotime: 'autotime_network',
        setting_bluetooth: 0,
        setting_navigation: 1,
        setting_statusbar: 1,
        setting_camera: 0,
        setting_tfmedia_format: "",//TF卡存储格式
        setting_clock: 1,
        setting_music: 1,
        setting_picture: 1,
        setting_wallpaper: 1,
        setting_recording: 1,
        setting_file: 1,
        setting_phone: 0,
        setting_phones: "",
        setting_tfmedia: 0,
        setting_bhtvideo: 0,
        setting_context: '',
        setting_bht: 0,//蓝牙总开关
        setting_hotspot: 1,//wifi开关
        qch_restore: 1,//恢复出厂设置开关
        setting_nav: { whole: true, home: true, returnKey: true, taskbar: true },//导航条选项
        setting_browserInput: 0,//浏览器网址管控
        setting_browser: 0,
        setting_statuspanelbar_forbit: -1,
      },
      rules: { batch: [{ required: true, message: "请选择批次", trigger: "blur" }] },
      //蓝牙总开关控制
      bluetooth: false,
      //蓝牙音频控制
      audioShow: false,
      //电话白名单列表控制
      settingPhoneShow: false,
      //影音娱乐功能管控
      settingFmediaShow: false,
      //图形文件格式黑名单
      graph: { checkAll: false, checkedCities: [], cities: [], isIndeterminate: true },
      //音频文件格式黑名单
      voice: { checkAll: false, checkedCities: [], cities: [], isIndeterminate: true },
      //视频文件格式黑名单
      videos: { checkAll: false, checkedCities: [], cities: [], isIndeterminate: true },
      //文档文件格式黑名单
      docum: { checkAll: false, checkedCities: [], cities: [], isIndeterminate: true },
      knowledge: [],
      listQuery: { startSize: 1, pageSize: 10, userId: localStorage.getItem("ID"), type: 1, batch: undefined, username: undefined },
    }
  },
  computed: {
    navKey() {
      return this.addForm.setting_nav.whole ? true : false
    },
    navigation() {
      return this.addForm.setting_navigation ? true : false
    },
    statusPanelBar() {
      return this.addForm.setting_statusbar ? true : false
    },
  },
  created() {
    this.getTabularData()
    this.getqueryTfMediaImg()
    this.getqueryTfMediaMusic()
    this.getqueryTfMediaFile()
    this.getqueryTfMediaVideo()
    this.getBatchTwos()
  },
  methods: {
    //删除
    getdeleteOtherSetting(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = {
        userId: localStorage.getItem("ID"),
        last_ip: sessionStorage.getItem("Ip"),
        id: this.deleteDialogs.deleteId
      }
      deleteOtherSetting(params).then(res => {
        this.$message.success(res.msg)
        this.getTabularData()
      })
    },
    //编辑系统其他管控设置
    geteditOtherSetting(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let addForm = JSON.parse(JSON.stringify(this.addForm))
          //影音娱乐管控功能，默认关闭，但选项是全选状态
          if (addForm.setting_tfmedia == 0) {
            // let graphs = this.graph.cities.map(item => item.format).toString()
            // let voices = this.voice.cities.map(item => item.format).toString()
            // let videoss = this.videos.cities.map(item => item.format).toString()
            // let citiess = this.docum.cities.map(item => item.format).toString()
            // addForm.setting_tfmedia_format = `${graphs},${voices},${videoss},${citiess}`
          } else {
            //否则就是用户自己选择的黑名单
            let graph = this.graph.checkedCities.toString()
            let voice = this.voice.checkedCities.toString()
            let videos = this.videos.checkedCities.toString()
            let docum = this.docum.checkedCities.toString()
            addForm.setting_tfmedia_format = `${graph},${voice},${videos},${docum}`
          }
          addForm.last_ip = sessionStorage.getItem("Ip")
          addForm.userId = localStorage.getItem("ID")
          addForm.batch = this.addForm.batch.toString()
          addForm.id = this.subjectId
          addForm.setting_phone == 1 ? addForm.setting_phones = this.addForm.setting_phones.toString() : addForm.setting_phones = ''
          addForm.setting_bhtvideo == 1 ? addForm.setting_context = this.addForm.setting_context.toString() : delete addForm.setting_context
          for (let k in addForm.setting_nav) {
            addForm.setting_nav[k] = Number(addForm.setting_nav[k])
          }
          addForm.setting_nav = JSON.stringify(addForm.setting_nav)
          editOtherSetting(addForm).then(res => {
            this.dialogFormVisible = false
            this.$message.success(res.msg)
            this.getTabularData()
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //table双击事件
    tableClick(row, column, event) {
      this.getqueryIdOtherSetting(row.id)
    },
    //按ID获取系统其它管控设置
    getqueryIdOtherSetting(id) {
      this.editSubjects = false
      this.subjectId = id
      queryIdOtherSetting({ id: id }).then(res => {
        this.dialogFormVisible = true
        let data = res.data
        Object.keys(this.addForm).forEach(key => { this.addForm[key] = data[key] })
        this.addForm.batch = data.batch.split(',')
        this.addForm.setting_phone == 1 ? this.settingPhoneShow = true : this.settingPhoneShow = false
        this.addForm.setting_bhtvideo == 1 ? this.audioShow = true : this.audioShow = false
        data.setting_tfmedia_format1 ? this.graph.checkedCities = data.setting_tfmedia_format1 : ''
        data.setting_tfmedia_format2 ? this.voice.checkedCities = data.setting_tfmedia_format2 : ''
        data.setting_tfmedia_format4 ? this.videos.checkedCities = data.setting_tfmedia_format3 : ''
        data.setting_tfmedia_format3 ? this.docum.checkedCities = data.setting_tfmedia_format4 : ''
        this.addForm.setting_tfmedia == 1 ? this.settingFmediaShow = true : this.settingFmediaShow = false
        this.addForm.setting_statuspanelbar_forbit = data.setting_statuspanelbar_forbit
        //全选状态
        this.$nextTick(() => {
          this.graph.checkAll = this.graph.checkedCities.length === this.graph.cities.length;
          this.graph.isIndeterminate = this.graph.checkedCities.length > 0 && this.graph.checkedCities.length < this.graph.cities.length;
          this.voice.checkAll = this.voice.checkedCities.length === this.voice.cities.length;
          this.voice.isIndeterminate = this.voice.checkedCities.length > 0 && this.voice.checkedCities.length < this.voice.cities.length;
          this.videos.checkAll = this.videos.checkedCities.length === this.videos.cities.length;
          this.videos.isIndeterminate = this.videos.checkedCities.length > 0 && this.videos.checkedCities.length < this.videos.cities.length;
          this.docum.checkAll = this.docum.checkedCities.length === this.docum.cities.length;
          this.docum.isIndeterminate = this.docum.checkedCities.length > 0 && this.docum.checkedCities.length < this.docum.cities.length;
        })
        this.addForm.setting_bht == 1 ? this.bluetooth = true : this.bluetooth = false
        data.setting_context != null ? this.addForm.setting_context = data.setting_context.split(',') : ''
        data.setting_phones != null ? this.addForm.setting_phones = data.setting_phones.split(',') : ''
        let setting_nav = JSON.parse(data.setting_nav)
        for (let k in setting_nav) {
          setting_nav[k] = Boolean(setting_nav[k])
        }
        this.addForm.setting_nav = setting_nav
      }).catch(err => { })
    },
    //添加系统管控设置
    getaddOtherSetting(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let addForm = JSON.parse(JSON.stringify(this.addForm))
          addForm.batch = this.addForm.batch.toString()
          addForm.last_ip = sessionStorage.getItem("Ip")
          addForm.userId = localStorage.getItem("ID")
          addForm.setting_phone == 1 ? addForm.setting_phones = this.addForm.setting_phones.toString() : addForm.setting_phones = ''
          addForm.setting_bhtvideo == 1 ? addForm.setting_context = this.addForm.setting_context.toString() : delete addForm.setting_context
          //影音娱乐管控功能，默认关闭，但选项是全选状态
          if (addForm.setting_tfmedia == 0) {
            // let graphs = this.graph.cities.map(item => item.format).toString()
            // let voices = this.voice.cities.map(item => item.format).toString()
            // let videoss = this.videos.cities.map(item => item.format).toString()
            // let citiess = this.docum.cities.map(item => item.format).toString()
            // addForm.setting_tfmedia_format = `${graphs},${voices},${videoss},${citiess}`
          } else {
            //否则就是用户自己选择的黑名单
            let graph = this.graph.checkedCities.toString()
            let voice = this.voice.checkedCities.toString()
            let videos = this.videos.checkedCities.toString()
            let docum = this.docum.checkedCities.toString()
            addForm.setting_tfmedia_format = `${graph},${voice},${videos},${docum}`
          }
          for (let k in addForm.setting_nav) {
            addForm.setting_nav[k] = Number(addForm.setting_nav[k])
          }
          addForm.setting_nav = JSON.stringify(addForm.setting_nav)
          addOtherSetting(addForm).then(res => {
            this.$message.success(res.msg)
            this.getTabularData()
            this.dialogFormVisible = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //导航条选项change事件
    eckboxChange(val) {
      if (val) {
        this.addForm.setting_nav.home = true
        this.addForm.setting_nav.returnKey = true
        this.addForm.setting_nav.taskbar = true
      }
    },
    getTabularData() {
      queryOtherSetting(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).catch(err => {
        this.total = 0
        this.tableData = []
      })
    },
    settingBluetooth(val) {
      if (val == 1) {
        this.bluetooth = true
        this.addForm.setting_bluetooth = 1
        this.addForm.setting_bhtvideo = 1
        this.audioShow = true
      } else {
        this.bluetooth = false
        //为0时，蓝牙数据功能和音频连接管控都为关闭状态
        this.addForm.setting_bluetooth = 0
        this.addForm.setting_bhtvideo = 0
        this.audioShow = false
      }
    },
    settingAudio(val) {
      val == 1 ? this.audioShow = true : this.audioShow = false
    },
    //监听电话白名单改变事件
    settingPhone(val) {
      val == 1 ? this.settingPhoneShow = true : this.settingPhoneShow = false
    },
    //监听影音娱乐功能管控事件
    settingFmedia(val) {
      this.settingFmediaShow = val == 1 ? true : false
    },
    //获取图形文件格式
    getqueryTfMediaImg() {
      queryTfMediaImg().then(res => {
        this.graph.cities = res.data
        this.graph.checkedCities = res.data.map(item => item.format)
        this.graph.checkAll = this.graph.checkedCities.length === this.graph.cities.length;
        this.graph.isIndeterminate = this.graph.checkedCities.length > 0 && this.graph.checkedCities.length < this.graph.cities.length;
      })
    },
    //获取音频文件格式
    getqueryTfMediaMusic() {
      queryTfMediaMusic().then(res => {
        this.voice.cities = res.data
        this.voice.checkedCities = res.data.map(item => item.format)
        this.voice.checkAll = this.voice.checkedCities.length === this.voice.cities.length;
        this.voice.isIndeterminate = this.voice.checkedCities.length > 0 && this.voice.checkedCities.length < this.voice.cities.length;
      })
    },
    //获取文档文件格式
    getqueryTfMediaFile() {
      queryTfMediaFile().then(res => {
        this.docum.cities = res.data
        this.docum.checkedCities = res.data.map(item => item.format)
        this.docum.checkAll = this.docum.checkedCities.length === this.docum.cities.length;
        this.docum.isIndeterminate = this.docum.checkedCities.length > 0 && this.docum.checkedCities.length < this.docum.cities.length;
      })
    },
    //获取视频文件格式
    getqueryTfMediaVideo() {
      queryTfMediaVideo().then(res => {
        this.videos.cities = res.data
        this.videos.checkedCities = res.data.map(item => item.format)
        this.videos.checkAll = this.videos.checkedCities.length === this.videos.cities.length;
        this.videos.isIndeterminate = this.videos.checkedCities.length > 0 && this.videos.checkedCities.length < this.videos.cities.length;
      })
    },
    //文档文件格式黑名单
    documhandleCheckAllChange(val) {
      this.docum.checkedCities = val ? this.docum.cities.map(item => item.format) : [];
      this.docum.isIndeterminate = false;
    },
    documhandleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.docum.checkAll = checkedCount === this.docum.cities.length;
      this.docum.checkedCities = value
      this.docum.isIndeterminate = checkedCount > 0 && checkedCount < this.docum.cities.length;
    },
    //视频文件格式黑名单
    videoshandleCheckAllChange(val) {
      this.videos.checkedCities = val ? this.videos.cities.map(item => item.format) : [];
      this.videos.isIndeterminate = false;
    },
    videohandleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.videos.checkAll = checkedCount === this.videos.cities.length;
      this.videos.checkedCities = value
      this.videos.isIndeterminate = checkedCount > 0 && checkedCount < this.videos.cities.length;
    },
    //音频文件格式黑名单
    voicehandleCheckAllChange(val) {
      this.voice.checkedCities = val ? this.voice.cities.map(item => item.format) : [];
      this.voice.isIndeterminate = false;
    },
    voicehandleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.voice.checkAll = checkedCount === this.voice.cities.length;
      this.voice.checkedCities = value
      this.voice.isIndeterminate = checkedCount > 0 && checkedCount < this.voice.cities.length;
    },
    //图形文件格式黑名单
    handleCheckAllChange(val) {
      this.graph.checkedCities = val ? this.graph.cities.map(item => item.format) : [];
      this.graph.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.graph.checkAll = checkedCount === this.graph.cities.length;
      this.graph.checkedCities = value
      this.graph.isIndeterminate = checkedCount > 0 && checkedCount < this.graph.cities.length;
    },
    btnaddBrand() {
      this.editSubjects = true
      this.dialogFormVisible = true
    },
    //根据ID获取批次列表
    getBatchTwos() {
      let data = { userId: localStorage.getItem("ID") }
      getBatchTwo(data).then(res => {
        this.lotoptions = res.data
      }).catch(err => {
        this.lotoptions = []
      })
    },
    //编辑添加表单关闭事件
    addFormclose() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.addForm = this.$options.data().addForm
        this.graph.checkAll = false
        this.graph.checkedCities = this.graph.cities.map(item => item.format)
        this.graph.isIndeterminate = true
        // //音频文件格式黑名单
        this.voice.checkAll = false
        this.voice.checkedCities = this.voice.cities.map(item => item.format)
        this.voice.isIndeterminate = true
        // //视频文件格式黑名单
        this.videos.checkAll = false
        this.videos.checkedCities = this.videos.cities.map(item => item.format)
        this.videos.isIndeterminate = true
        // //文档文件格式黑名单
        this.docum.checkAll = false
        this.docum.checkedCities = this.docum.cities.map(item => item.format)
        this.docum.isIndeterminate = true
        this.settingPhoneShow = false
        this.settingFmediaShow = false
        this.audioShow = false
        this.bluetooth = false
      })
    },
  }
}
</script>

<style scoped lang="scss">
.selectStyle {
  width: 80%;
}
.setLabel {
  width: 160px;
  text-align: right;
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  padding: 0 12px 0 0;
}
.eckBox {
  .el-checkbox {
    font-size: 12px !important;
  }
}
</style>

<style scoped>
/deep/ .el-form-item__label {
  font-weight: 500;
}
/deep/ .el-dialog__body {
  max-height: 600px !important;
  overflow: auto;
}
/deep/ .selectPopper {
  display: none;
}
/* /deep/ .el-checkbox__label {
  font-size: 12px;
} */
/deep/ .el-checkbox__inner {
  border-radius: 50%;
}
</style>
